<template>
    <div>
        <div class="goods-container">
            <div class="goods-box" v-for="item in goodslist" :key="item.id" @click="routerpush(item.id)">
                <img :src="item.img_url" >
                <h4>{{item.title}}</h4>
            <div class="goodsinfo-box">
                <p><span>￥{{item.sell_price}}&nbsp;&nbsp;</span><span style="text-decoration:line-through">￥{{item.market_price}}</span></p>
                <div>
                    <span>热卖中</span>
                    <span>剩余{{item.stock_quantity}}件</span>
                </div>
            </div>
        </div>
        <!-- 加载按钮 -->
        <mt-button type="danger" size="large" @click="getmore()">加载更多</mt-button>
        </div>
        <!-- 商品列表 -->
        
            
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageindex:1,
            goodslist:[]
        }
    },
    created(){
        this.getgoodslist();
    },
    methods: {
        getgoodslist() {
            this.$http.get("api/getgoods?pageindex="+this.pageindex+"").then(result=>{
                if(result.body.status === 0){
                     this.goodslist = result.body.message
                }
            })
        },
        getmore(){
            this.$http.get("api/getgoods?pageindex="+ ++this.pageindex +"").then(result=>{
                console.log(this.pageindex)
                if(result.body.status === 0){
                    result.body.message.forEach(item =>{
                        this.goodslist.push(item)
                        
                    })
                    console.log(this.goodslist)
                }
            })
        },
        routerpush(id){
            this.$router.push({path:"/home/goodsinfo/"+id})
        }
    }
}
</script>

<style lang="less" scoped>
    .goods-container{
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        justify-content: space-between;
        margin-bottom:50px;
    }
    .goods-box{
        width: 49%;
        border: 1px solid lightgray;
        box-shadow: 0 0 0.3;
        margin: 3px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img{
            width: 100%
        }
        .goodsinfo-box{
            background-color: lightgrey;
            p{
                span{
                    color:red;
                    font-weight: bold;
                }
            }
            div{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
            }
        }
    }
</style>
